<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .active1 {
        background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100120461512E-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640331832&t=8fe4ed8dbf43c180120fecc1e45c47f4);
        background-size: 100vw 100vh;
      }
      .active2 {
        background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640333074&t=8ecc0f9d4be96cb0b718aff1929b429c);
        background-size: 100vw 100vh;
      }
    </style>
  </head>
  <body>
    <div class="box">
      1111
      <div class="box2">2222</div>
    </div>
    <button>我是皮肤一</button><button>我是皮肤二</button>
    <script>
      // var btns = document.querySelectorAll("button");
      var btns = document.getElementsByTagName("button");
      // console.log(btns);
      // btns[0].onclick = function(){
      //     document.body.className = "active1";
      // }

      // btns[1].onclick = function(){
      //     document.body.className = "active2";
      // }

      // 1.获取元素；可以指定范围获取
      //      var boxEle1 =   document.querySelector(".box");
      // //   console.log(boxEle);

      //     var boxEle2 =   boxEle1.querySelector(".box2");
      //     console.log(boxEle2);

      // 2.元素循环；相互转换类型
      // console.log(btns);
      Array.from(btns).forEach(function (item, key) {
        // console.log(item);
        item.onclick = function () {
          // console.log(key);
          if (key == 0) {
            document.body.className = "active1";
          } else if (key == 1) {
            document.body.className = "active2";
          }
        };
      });
    </script>
  </body>
</html>
